<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X-Brain Agent - 智能代理管理</title>
    <link rel="stylesheet" href="css/dark-theme.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-100">
    <!-- Sidebar -->
    <div class="fixed inset-y-0 left-0 w-64 bg-gray-800 shadow-lg">
        <div class="flex items-center justify-center h-16 bg-gray-700">
            <h1 class="text-xl font-bold">X-Brain Agent</h1>
        </div>
        <nav class="mt-4">
            <a href="index.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-home mr-3"></i>
                仪表盘
            </a>
            <a href="knowledge-base.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-book mr-3"></i>
                知识库
            </a>
            <a href="chat.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-comments mr-3"></i>
                智能对话
            </a>
            <a href="search.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-search mr-3"></i>
                语义搜索
            </a>
            <a href="agent.html" class="flex items-center px-6 py-3 bg-gray-700 text-white">
                <i class="fas fa-robot mr-3"></i>
                智能代理
            </a>
            <a href="file-manager.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-folder mr-3"></i>
                文件管理
            </a>
            <a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-cog mr-3"></i>
                系统设置
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="ml-64 p-8">
        <!-- Header -->
        <header class="flex justify-between items-center mb-8">
            <div>
                <h2 class="text-2xl font-bold">智能代理管理</h2>
                <p class="text-gray-400">管理和监控您的智能代理</p>
            </div>
            <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-plus mr-2"></i>
                新建代理
            </button>
        </header>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-xl font-semibold">活跃代理</h3>
                    <i class="fas fa-robot text-blue-500 text-2xl"></i>
                </div>
                <p class="text-3xl font-bold">8</p>
                <p class="text-gray-400">个正在运行</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-xl font-semibold">总处理量</h3>
                    <i class="fas fa-chart-line text-green-500 text-2xl"></i>
                </div>
                <p class="text-3xl font-bold">1,234</p>
                <p class="text-gray-400">次请求/小时</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-xl font-semibold">平均响应</h3>
                    <i class="fas fa-clock text-yellow-500 text-2xl"></i>
                </div>
                <p class="text-3xl font-bold">1.2s</p>
                <p class="text-gray-400">响应时间</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-xl font-semibold">系统负载</h3>
                    <i class="fas fa-server text-purple-500 text-2xl"></i>
                </div>
                <p class="text-3xl font-bold">65%</p>
                <p class="text-gray-400">CPU使用率</p>
            </div>
        </div>

        <!-- Agent Grid -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold">代理列表</h3>
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索代理..." 
                               class="bg-gray-700 text-gray-100 px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                    </div>
                    <select class="bg-gray-700 text-gray-100 px-4 py-2 rounded-lg">
                        <option>所有状态</option>
                        <option>运行中</option>
                        <option>已暂停</option>
                        <option>已停止</option>
                    </select>
                </div>
            </div>

            <!-- Agent Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Agent Card -->
                <div class="bg-gray-700 rounded-lg p-4">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="font-semibold">文档处理代理</h4>
                            <p class="text-sm text-gray-400">处理和索引文档</p>
                        </div>
                        <div class="flex items-center">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                            <span class="text-sm">运行中</span>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">CPU使用率</span>
                            <span>45%</span>
                        </div>
                        <div class="w-full bg-gray-600 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">内存使用</span>
                            <span>1.2GB / 2GB</span>
                        </div>
                        <div class="w-full bg-gray-600 rounded-full h-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-between">
                        <div class="text-sm">
                            <p class="text-gray-400">处理量</p>
                            <p>324 文档/小时</p>
                        </div>
                        <div class="flex space-x-2">
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-pause"></i></button>
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-sync"></i></button>
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-cog"></i></button>
                        </div>
                    </div>
                </div>

                <!-- Agent Card -->
                <div class="bg-gray-700 rounded-lg p-4">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="font-semibold">问答代理</h4>
                            <p class="text-sm text-gray-400">处理用户查询</p>
                        </div>
                        <div class="flex items-center">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                            <span class="text-sm">运行中</span>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">CPU使用率</span>
                            <span>75%</span>
                        </div>
                        <div class="w-full bg-gray-600 rounded-full h-2">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: 75%"></div>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">内存使用</span>
                            <span>1.8GB / 2GB</span>
                        </div>
                        <div class="w-full bg-gray-600 rounded-full h-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-between">
                        <div class="text-sm">
                            <p class="text-gray-400">响应时间</p>
                            <p>1.5s 平均</p>
                        </div>
                        <div class="flex space-x-2">
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-pause"></i></button>
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-sync"></i></button>
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-cog"></i></button>
                        </div>
                    </div>
                </div>

                <!-- Agent Card -->
                <div class="bg-gray-700 rounded-lg p-4">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="font-semibold">索引优化代理</h4>
                            <p class="text-sm text-gray-400">优化搜索索引</p>
                        </div>
                        <div class="flex items-center">
                            <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
                            <span class="text-sm">维护中</span>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">CPU使用率</span>
                            <span>25%</span>
                        </div>
                        <div class="w-full bg-gray-600 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: 25%"></div>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">内存使用</span>
                            <span>0.8GB / 2GB</span>
                        </div>
                        <div class="w-full bg-gray-600 rounded-full h-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-between">
                        <div class="text-sm">
                            <p class="text-gray-400">索引大小</p>
                            <p>2.4GB</p>
                        </div>
                        <div class="flex space-x-2">
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-play"></i></button>
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-sync"></i></button>
                            <button class="text-gray-400 hover:text-white"><i class="fas fa-cog"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>
